import React from 'react';
import {connect} from 'dva';
import {Button, Col, Form, Input, Popconfirm, Row, Select, Table} from 'antd';
import Constants from '../../../utils/Constants';
import RightConstants from '../../../utils/RightConstants';
import RightBox from '../../../components/commons/RightBox';
import SupplierDetail from '../../../components/logistics/SupplierDetail';
const FormItem = Form.Item;


const logisticsSupplier = Form.create()(class LogisticsSupplier extends React.Component{
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.props.dispatch({ type: 'logisticsSupplier/getListForPage', payload: { page: Constants.DEFAULT_PAGE } });
    }

    handleOpen = (id, disabled, type) => {
        this.props.dispatch({
            type: 'logisticsSupplier/getById',
            payload: { id }
        })
        if(type != "add"){
            this.props.dispatch({
                type: 'logisticsSupplier/getPayeeListForPage',
                payload: {
                    supplierid: id,
                    page: Constants.DEFAULT_PAGE
                }
            })
        }

        this.supplierDetail.handleOpen(id, disabled, type);
    }

    handleDelete = id => {
        this.props.dispatch({
            type: 'logisticsSupplier/deleteById',
            payload: {
                id,
                onSuccess: this.handleSearch
            }
        })
    }

    handleSearch = flag => {
        let newPage = this.props.logisticsSupplier.page;
        if (flag) newPage.page = 1;
        this.props.dispatch({
            type: 'logisticsSupplier/getListForPage',
            payload: {
                ...this.props.form.getFieldsValue(),
                page: newPage
            }
        });
    };

    columns = [
        { title: '供应商编码', dataIndex: 'supplierCode', key: 'supplierCode'},
        // { title: '物流运输类型', render(record) {
        //     if(record.transportType == '1') {
        //         return '海运整柜';
        //     }else if(record.transportType == '2') {
        //         return '海运拼柜';
        //     }else if(record.transportType == '3') {
        //         return '空运';
        //     }else if(record.transportType == '4') {
        //         return '快递';
        //     }else {
        //         return '--';
        //     }
        // }},
        { title: '公司名称', dataIndex: 'companyname', key: 'companyname'},
        { title: '等级', render(record) {
            if(record.level === 'A') {
                return '优质';
            }else if(record.level === 'B') {
                return '良好';
            }else if(record.level === 'C') {
                return '普通';
            }else if(record.level === 'D') {
                return '差';
            }else {
                return '未知';
            }
        }},
        { title: '联系人', dataIndex: 'contactor', key: 'contactor'},
        { title: '联系方式类型', render(record) {
            if(record.contactWay === '1') {
                return '移动电话';
            }else if(record.contactWay === '2') {
                return '固定电话';
            }else if(record.contactWay === '3') {
                return 'QQ';
            }else if(record.contactWay === '4') {
                return '微信';
            }else {
                return '未知';
            }
        }},
        { title: '联系内容', dataIndex: 'contactContent', key: 'contactContent'},
        { title: '合作状态', render(record) {
            if(record.status === '0') {
                return '失效';
            }else if(record.status === '1') {
                return '正常';
            }else {
                return '未知';
            }
        }},
        { title: '合作结束时间', dataIndex: 'enddate', key: 'enddate'},
        { title: '创建人', dataIndex: 'creatorName', key: 'creatorName'},
        {
            title: '操作',
            render: (record) => {
                let editLink = <RightBox resource={RightConstants.LOGISTICS_SUPPLIER.LOGISTICS_SUPPLIER_EDIT} split={true}><a href="#" onClick={this.handleOpen.bind(this, record.id, false)}>编辑</a></RightBox>
                let deleteLink = <Popconfirm onConfirm={this.handleDelete.bind(this, record.id)} okText="是" cancelText="否"
                                             placement="leftTop" title={'数据删除后将不可以恢复，是否继续删除?'}>
                    <a href="#">删除</a>
                </Popconfirm>
                deleteLink = <RightBox resource={RightConstants.LOGISTICS_SUPPLIER.LOGISTICS_SUPPLIER_DELETE} split={true}>{deleteLink}</RightBox>
                let viewLink = <a href="#" onClick={this.handleOpen.bind(this, record.id, true)}>查看</a>
                return <span>{editLink}{deleteLink}{viewLink}</span>
            }
        }
    ];

    render(){
        let formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 16 } };
        const { getFieldDecorator } = this.props.form;
        let pagination = {
            showTotal: total => `共 ${total} 条数据`,
            pageSize: this.props.logisticsSupplier.page.size,
            current: this.props.logisticsSupplier.page.page,
            total: this.props.logisticsSupplier.page.totalRow,
            showSizeChanger: true,
            onShowSizeChange: (current, size) => {
                let newPage = this.props.logisticsSupplier.page;
                newPage.size = size;
                newPage.page = 1;
                this.props.dispatch({
                    type: 'logisticsSupplier/getListForPage',
                    payload: {
                        ...this.props.form.getFieldsValue(),
                        page: newPage
                    }
                });
            },
            onChange: (pageNumber, pageSize) => {
                let newPage = this.props.logisticsSupplier.page;
                newPage.page = pageNumber;
                this.props.dispatch({
                    type: 'logisticsSupplier/getListForPage',
                    payload: {
                        ...this.props.form.getFieldsValue(),
                        page: newPage
                    }
                });
            }
        }

        return (
            <div>
                <Row>
                    <Col span={8}>
                        <FormItem {...formItemLayout} label={'供应商'}>
                            {getFieldDecorator('supplier')
                            (
                                <Input maxLength="20" placeholder="可根据供应商编码、中英文名称搜索" />
                            )
                            }
                        </FormItem>
                    </Col>
                    <Col span={11} style={{ marginLeft: 42}}>
                        <Button type="primary" icon="search" style={{marginRight: 5}} onClick={this.handleSearch.bind(this,true)} size={'default'}>查询</Button>
                        <RightBox resource={RightConstants.LOGISTICS_SUPPLIER.LOGISTICS_SUPPLIER_ADD}>
                            <Button type="primary" icon="plus" style={{ marginRight: 5 }} onClick={this.handleOpen.bind(this, null,false, "add")} size={'default'}>添加物流供应商</Button>
                        </RightBox>
                    </Col>
                    <Col span={8}>
                        {/*<FormItem {...formItemLayout} label={'供应商类型'}>*/}
                            {/*{getFieldDecorator('supplierType')*/}
                            {/*(*/}
                                {/*<Select style={{ width: "100%" }} allowClear>*/}
                                    {/*<Select.Option value="1">海运供应商</Select.Option>*/}
                                    {/*<Select.Option value="2">拖车供应商</Select.Option>*/}
                                    {/*<Select.Option value="3">报关供应商</Select.Option>*/}
                                    {/*<Select.Option value="4">空运供应商</Select.Option>*/}
                                    {/*<Select.Option value="5">快递供应商</Select.Option>*/}
                                    {/*<Select.Option value="6">保险供应商</Select.Option>*/}
                                    {/*<Select.Option value="7">仓库供应商</Select.Option>*/}
                                    {/*<Select.Option value="8">商检供应商</Select.Option>*/}
                                    {/*<Select.Option value="9">产地证供应商</Select.Option>*/}
                                {/*</Select>*/}
                            {/*)}*/}
                        {/*</FormItem>*/}
                    </Col>
                </Row>
                <Row>
                    <Col span={8}>
                        {/*<FormItem {...formItemLayout} label={'运输类型'}>*/}
                            {/*{getFieldDecorator('transportType')*/}
                            {/*(*/}
                                {/*<Select style={{ width: "100%" }} allowClear>*/}
                                    {/*<Select.Option value="1">海运整柜</Select.Option>*/}
                                    {/*<Select.Option value="2">海运拼柜</Select.Option>*/}
                                    {/*<Select.Option value="3">空运</Select.Option>*/}
                                    {/*<Select.Option value="4">快递</Select.Option>*/}
                                {/*</Select>*/}
                            {/*)}*/}
                        {/*</FormItem>*/}
                    </Col>
                </Row>

                <Table loading={this.props.loading} rowKey='id' dataSource={this.props.logisticsSupplier.list} columns={this.columns} bordered={true} size={'middle'} pagination={pagination} />
                <SupplierDetail wrappedComponentRef={(inst) => this.supplierDetail = inst} refreshList={this.handleSearch} />
            </div>
        );
    }
})

function mapStateToProps(state){
    return{
        loading: state.loading.models.logisticsSupplier, logisticsSupplier: state.logisticsSupplier
    };
}

export default connect(mapStateToProps)(logisticsSupplier);
